<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

    <style>
        body{
            margin: 20px;
            background-color: rgb(159, 159, 159);

        }

        th{
            text-align: center;
        }

    </style>
</head>
<body>
<div>
    <input name="userName" id="userName" type="text"/><input type="button" onclick="getBorrowInfo()" value="查询">&nbsp;&nbsp;&nbsp;&nbsp;
    <label>
        <input type="checkbox" id="returned" value="已归还"/>已归还&nbsp;&nbsp;
        <input type="checkbox" id="notReturned" value="未归还"/>未归还&nbsp;&nbsp;
        <input type="checkbox" id="overdue" value="已逾期"/>已逾期&nbsp;&nbsp;
    </label><input type="button" value="筛选" onclick="screenBorrowInfo()">
</div>
<div>
    <table border="1" class="table" >
        <thead >
        <tr>
            <th>用户名</th>
            <th>书名</th>
            <th>借阅时间</th>
            <th>归还时间</th>
            <th>借书金额</th>
            <th>状态</th>
        </tr>
        </thead>
        <tbody id="borrowInfo">

        </tbody>
    </table>
</div>
</body>
</html>
<script src="/js/jquery-3.5.1.js"></script>
<script>

    getBorrowInfo();

    function getBorrowInfo() {
        $("#borrowInfo").empty();
        $.post("/getBorrowInfo.admin", {userName: $("#userName").val()}, function (responseText) {
            appendMsg(responseText);
        })
    }

    function screenBorrowInfo() {
        $("#borrowInfo").empty();

        if ($("#returned").is(":checked")) {
            $.post("/getBorrowInfo.admin", {state: $("#returned").val()}, function (responseText) {
                appendMsg(responseText);
            })
        }
        if ($("#notReturned").is(":checked")) {
            $.post("/getBorrowInfo.admin", {state: $("#notReturned").val()}, function (responseText) {
                appendMsg(responseText);
            })
        }
        if ($("#overdue").is(":checked")) {
            $.post("/getBorrowInfo.admin", {state: $("#overdue").val()}, function (responseText) {
                appendMsg(responseText);
            })
        }

    }

    function appendMsg(responseText) {
        let borrowObj = JSON.parse(responseText);
        for (let i = 0; i < borrowObj.length; i++) {
            let td = "<td>" + borrowObj[i].userName + "</td>"
            td += "<td>" + borrowObj[i].bookName + "</td>"
            td += "<td>" + borrowObj[i].borDate + "</td>"
            td += "<td>" + borrowObj[i].repayDate + "</td>"
            td += "<td>" + borrowObj[i].price + "</td>"
            td += "<td>" + borrowObj[i].state + "</td>"
            let tr = "<tr>" + td + "</tr>"
            $("#borrowInfo").append(tr);
        }
    }
</script>